<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>健康目标管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .goal-table { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(76,175,80,0.08); margin: 40px auto; max-width: 900px; padding: 32px; }
        .goal-table th { background: #4CAF50; color: #fff; }
        .goal-table td, .goal-table th { padding: 12px 16px; }
        .btn-manage { background: #4CAF50; color: #fff; font-weight: bold; border-radius: 6px; padding: 6px 18px; font-size: 1em; }
        .btn-manage:hover { background: #388e3c; }
    </style>
</head>
<body class="bg-light">
    <div class="container">
        <h2 class="text-success my-4">健康目标管理</h2>
        <div class="goal-table">
            <form id="addGoalForm" class="row g-3 mb-4">
                <div class="col-md-3"><input type="text" class="form-control" name="title" placeholder="目标名称" required></div>
                <div class="col-md-3"><input type="text" class="form-control" name="type" placeholder="目标类型" required></div>
                <div class="col-md-3"><input type="date" class="form-control" name="startDate" required></div>
                <div class="col-md-3"><input type="date" class="form-control" name="endDate" required></div>
                <div class="col-12"><input type="text" class="form-control" name="description" placeholder="目标描述"></div>
                <div class="col-12"><button type="submit" class="btn btn-manage">添加目标</button></div>
            </form>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>类型</th>
                        <th>描述</th>
                        <th>开始日期</th>
                        <th>结束日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="goalTableBody">
                    <!-- 目标数据通过JS动态加载 -->
                </tbody>
            </table>
        </div>
    </div>
    <!-- 编辑目标模态框 -->
    <div class="modal fade" id="editGoalModal" tabindex="-1" aria-labelledby="editGoalModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <form id="editGoalForm">
            <div class="modal-header">
              <h5 class="modal-title" id="editGoalModalLabel">编辑目标</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
              <input type="hidden" id="editGoalId">
              <div class="mb-3">
                <label class="form-label">目标名称</label>
                <input type="text" class="form-control" id="editGoalTitle" required>
              </div>
              <div class="mb-3">
                <label class="form-label">目标类型</label>
                <input type="text" class="form-control" id="editGoalType" required>
              </div>
              <div class="mb-3">
                <label class="form-label">目标描述</label>
                <input type="text" class="form-control" id="editGoalDesc">
              </div>
              <div class="mb-3">
                <label class="form-label">开始日期</label>
                <input type="date" class="form-control" id="editGoalStart" required>
              </div>
              <div class="mb-3">
                <label class="form-label">结束日期</label>
                <input type="date" class="form-control" id="editGoalEnd" required>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
              <button type="submit" class="btn btn-success">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 示例JS，实际应对接后端API
        let goals = [
            {id: 1, title: '减重5kg', type: '减重', description: '三个月内健康减重', startDate: '2025-06-01', endDate: '2025-09-01'},
            {id: 2, title: 'BMI降至22', type: '体型', description: '控制饮食+运动', startDate: '2025-06-01', endDate: '2025-12-01'}
        ];
        function renderGoals() {
            const tbody = document.getElementById('goalTableBody');
            tbody.innerHTML = '';
            goals.forEach(goal => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${goal.id}</td>
                    <td>${goal.title}</td>
                    <td>${goal.type}</td>
                    <td>${goal.description}</td>
                    <td>${goal.startDate}</td>
                    <td>${goal.endDate}</td>
                    <td>
                        <button class='btn btn-sm btn-manage' onclick='editGoal(${goal.id})'>编辑</button>
                        <button class='btn btn-sm btn-danger' onclick='deleteGoal(${goal.id})'>删除</button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }
        document.getElementById('addGoalForm').onsubmit = function(e) {
            e.preventDefault();
            const form = e.target;
            const newGoal = {
                id: goals.length ? goals[goals.length-1].id+1 : 1,
                title: form.title.value,
                type: form.type.value,
                description: form.description.value,
                startDate: form.startDate.value,
                endDate: form.endDate.value
            };
            goals.push(newGoal);
            renderGoals();
            form.reset();
        };
        function editGoal(id) {
            // 查找目标
            const goal = goals.find(g => g.id === id);
            if (!goal) return;
            // 填充表单
            document.getElementById('editGoalId').value = goal.id;
            document.getElementById('editGoalTitle').value = goal.title;
            document.getElementById('editGoalType').value = goal.type;
            document.getElementById('editGoalDesc').value = goal.description;
            document.getElementById('editGoalStart').value = goal.startDate;
            document.getElementById('editGoalEnd').value = goal.endDate;
            // 显示模态框
            var modal = new bootstrap.Modal(document.getElementById('editGoalModal'));
            modal.show();
        }
        // 编辑表单提交
        document.getElementById('editGoalForm').onsubmit = function(e) {
            e.preventDefault();
            const id = parseInt(document.getElementById('editGoalId').value);
            const idx = goals.findIndex(g => g.id === id);
            if (idx === -1) return;
            goals[idx] = {
                id: id,
                title: document.getElementById('editGoalTitle').value,
                type: document.getElementById('editGoalType').value,
                description: document.getElementById('editGoalDesc').value,
                startDate: document.getElementById('editGoalStart').value,
                endDate: document.getElementById('editGoalEnd').value
            };
            renderGoals();
            // 关闭模态框
            var modalEl = document.getElementById('editGoalModal');
            var modal = bootstrap.Modal.getInstance(modalEl);
            modal.hide();
        };
        function deleteGoal(id) {
            if(confirm('确定要删除该目标吗？')) {
                goals = goals.filter(g => g.id !== id);
                renderGoals();
            }
        }
        renderGoals();
    </script>
</body>
</html> 